<template>
  <div class="mall">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <ul>
        <li v-for="(item, index) in sidebarlist" :key="index" @click="change(item.cat_name)">
          {{ item.cat_name }}
        </li>
      </ul>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- <div class="goods">
        <ul>
          <li>综合</li>
          <li>热卖</li>
          <li>新品</li>
        </ul>
      </div> -->
      <!-- 商品列表 -->
      <div class="list-content">
        <ul>
          <li v-for="item in goodslist" :key="item.id" @click="$router.push(`/mydetail/${goodsId}`)">
            <img :src="item.goodsLogo" alt="" />
            <p class="sold">
              已售<span>{{ item.goodsBuyNum }}</span>件
            </p>
            <div class="message">
              <p>{{ item.goodsName }}</p>
              <span class="del"><del>{{ item.goodsOldPrice }}</del></span>
              <span class="now">￥{{ item.goodsPrice }}</span>
              <span class="collect">
                <img src="../../../assets/images/collect.png" alt="" />
                <span>{{ item.goodsFav }}</span>
              </span>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { MGoodsApi } from '@/request/api'
export default {
  props: ['sidebarlist'],
  data() {
    return {
      // 商品列表
      goodslist: []
    }
  },
  methods: {
    change(cat_name) {
      console.log(cat_name)
      // 商品列表
      MGoodsApi(cat_name).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.goodslist = res.data.data
          console.log(this.goodslist)
        }
      })
    }
  },
  created() {
    MGoodsApi('帆布鞋').then(res => {
      if (res.data.code === 200) {
        this.goodslist = res.data.data
      }
    })
  }
}
</script>
 
<style lang="less" scoped>
.mall {
  display: flex;
  .sidebar {
    width: 22%;
    height: 100%;
    background-color: #f7f8fa;
    position: sticky;
    top: 0;
    li {
      width: 75%;
      padding: 20px 10px;
      text-align: center;
      &:hover {
        background-color: #fff;
        border-left: 0.5vw solid #f60;
      }
    }
  }
  .content {
    width: 78%;
    .goods {
      margin: 10px 0;
      // ul {
      //   display: flex;
      //   justify-content: space-evenly;
      //   li {
      //     padding-bottom: 10px;
      //     &:hover {
      //       color: #f60;
      //       border-bottom: 2px solid #f60;
      //     }
      //   }
      // }
    }
  }
  .list-content {
    margin-left: 1vw;
    background-color: #f7f8fa;
    margin-bottom: 14vw;
    ul {
      display: flex;
      flex-wrap: wrap;
      li {
        width: 48%;
        border-radius: 10px;
        overflow: hidden;
        background-color: #fff;
        margin: 5px 0 5px 5px;
        position: relative;
        img {
          width: 100%;
        }
        .sold {
          color: #fff;
          position: absolute;
          top: 0;
          left: 0;
          padding: 5px;
          font-size: 12px;
          background-color: rgba(0, 0, 0, 0.5);
        }
        .message {
          margin-left: 5px;
          font-size: 14px;
          p {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            margin-bottom: 3px;
          }
          .del {
            color: #b4b4b4;
            font-size: 12px;
          }
          .now {
            color: red;
            font-weight: bolder;
            margin-left: 10px;
          }
          .collect {
            float: right;
            font-size: 12px;
            margin-right: 10px;
            img {
              width: 14px;
            }
          }
          margin-bottom: 10px;
          line-height: 20px;
        }
      }
    }
  }
}
</style>